<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入js文件 -->
    <script src="bootstrap/jquery/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <title>动漫之家博客</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <!-- 左侧 -->
            <header class="col-md-2">
                <div class="log">
                    <a href="#">
                        <img src="imgs/jpg.11.jpg" alt="" title="宇智波斑" class="hidden-sm hidden-xs">
                        <span><img src="imgs/jpg.16.jpg" alt="" class="visible-sm visible-xs"></span>
                    </a>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                        <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                        <li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li>
                        <li><a href="#" class="glyphicon glyphicon-gift">趣奇事</a></li>
                        <li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li>
                    </ul>
                </div>
            </header>
            <!-- 中间 -->
            <article class="col-md-7">
                <!-- 新闻 -->
                <!-- bootstrap的清除浮动 添加clearfix类 -->
                <div class="news clearfix">
                    <ul>
                        <li>
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">


                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <img src="imgs/jpg.4.jpg" alt="...">
                                        <div class="carousel-caption">
                                            草帽海贼团
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="imgs/jpg.3.jpg" alt="...">
                                        <div class="carousel-caption">
                                            草帽海贼团
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="imgs/jpg.1.jpg" alt="...">
                                        <div class="carousel-caption">
                                            草帽海贼团
                                        </div>
                                    </div>
                                </div>

                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-example-generic" role="button"
                                    data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button"
                                    data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="imgs/jpg.5.jpg" alt="" title="艾斯">
                                <p>有个爱闯祸的弟弟，哥哥总是要特别担心</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="imgs/jpg.10.jpg" alt="" title="宇智波鼬">
                                <p>为什么你会这么弱？因为你对我的憎恨...还不够深</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="imgs/jpg.9.jpg" alt="" title="南">
                                <p>下一次，我希望你能开出永不凋谢的希望之花送给我</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="imgs/jpg.8.jpg" alt="" title="决战之谷">
                                <p>至今为止所一起拥有的...并且理应共同拥有的未来</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <script>
                    $('.carousel').carousel({
                        interval: 2000
                    })
                </script>
                <!-- 发表 -->
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>我不会去统治这片大海，在这片大海上，最自由的人就是海贼王！</h3>
                            <p class="text-muted hidden-xs">amenqdlufei 发布于 2020-6-15</p>
                            <p class="hidden-xs">海贼王，我当定了！</p>
                            <p class="text-muted">阅读(5128)评价(3435) 赞(472) <span class="hidden-xs">标签：二次元 / 海贼王 / 励志 / 热血
                                    / 冒险</span></p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="imgs/jpg.18.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>成为世界第一的剑豪，让我的名字，响彻天堂！</h3>
                            <p class="text-muted hidden-xs">allyazluo 发布于 2020-8-25</p>
                            <p class="hidden-xs">请把那把刀给我吧！我会连她的份也一起努力的，我要成为世界第一的剑豪，让我的名字，响彻天堂！</p>
                            <p class="text-muted">阅读(4128)评价(2931) 赞(392) <span class="hidden-xs">标签：二次元 / 海贼王 / 励志 / 热血
                                    / 冒险</span></p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="imgs/jpg.13.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>如果放弃自己的兄弟这就叫聪明，那我宁愿做一辈子的傻瓜</h3>
                            <p class="text-muted hidden-xs">axuanmingren 发布于 2020-8-29</p>
                            <p class="hidden-xs">然后将来的梦想，要超越火影，因为我要让全村人认同我的存在！</p>
                            <p class="text-muted">阅读(4928)评价(3131) 赞(432) <span class="hidden-xs">标签：二次元 / 火影忍者 / 励志 /
                                    热血 / 冒险</span></p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="imgs/jpg.20.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>只有经历痛楚才会真正成长，经历痛楚吧！体验痛楚吧！感受痛楚吧！</h3>
                            <p class="text-muted hidden-xs">amiyan 发布于 2020-9-1</p>
                            <p class="hidden-xs">所谓战争....就一定伴随着双方死亡病伤和痛苦....但是 其实谁都无法接受亲密伙伴死亡或许只是认为....他们都会安然无恙....！</p>
                            <p class="text-muted">阅读(4028)评价(2531) 赞(242) <span class="hidden-xs">标签：二次元 / 火影忍者/ 励志 / 热血
                                    / 冒险</span></p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="imgs/jpg.21.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>无法承认自我的人，终究会失败，就像曾经的我那样</h3>
                            <p class="text-muted hidden-xs">allyazluo 发布于 2020-9-4</p>
                            <p class="hidden-xs">并不是成为火影就会得到大家的认同，而是被大家所认可的人才能成为火影。</p>
                            <p class="text-muted">阅读(4428)评价(2631) 赞(362) <span class="hidden-xs">标签：二次元 / 火影忍者 / 励志 /
                                    热血 / 冒险</span></p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="imgs/jpg.22.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>剑是凶器，剑技是杀人的伎俩，无论用多么美丽的语言去掩饰，那始终是事实</h3>
                            <p class="text-muted hidden-xs">alkejianxing 发布于 2020-9-7</p>
                            <p class="hidden-xs">对与错，应该由历史来决定。我们能做的，就是相信自己认为对的事，然后为此战斗。</p>
                            <p class="text-muted">阅读(3564)评价(2294) 赞(307) <span class="hidden-xs">标签：二次元 / 绯村剑心 / 励志 /
                                    热血 / 冒险</span></p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="imgs/jpg.23.jpg" alt="">
                        </div>
                    </div>
                </div>
            </article>
            <!-- 右侧 -->
            <aside class="col-md-3">
                <a href="#" class="banner">
                    <img src="imgs/jpg.6.jpg" alt="" class="hidden-sm hidden-xs">
                    <span><img src="imgs/jpg.15.jpg" alt="" class="visible-sm visible-xs"></span>
                </a>
                <a href="#" class="hot">
                    <span class="btn btn-primary">热搜</span>
                    <h4 class="text-primary">欢迎加入动漫之家</h4>
                    <p class="text-muted">这里收录了国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
                </a>
            </aside>
        </div>
    </div>
</body>

</html>